---
title: ボタン
image: /images/user-guide/views/filter.png
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Header" />
</Frame>

アプリ全体で使用されるボタンおよびボタングループの一覧。

## ボタン

<Tabs>

<Tab title="Usage">

```jsx
import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| プロパティ     | タイプ                   | 説明                                                                 |
| --------- | --------------------- | ------------------------------------------------------------------ |
| className | string                | 追加のスタイリングのためのオプションクラス名                                             |
| アイコン      | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント                                        |
| タイトル      | string                | ボタンのテキスト内容                                                         |
| fullWidth | ブール型                  | ボタンがコンテナの全幅を占めるかどうかを定義します                                          |
| バリアント     | string                | ボタンの視覚スタイルのバリアント。 オプションは `primary`、`secondary`、 `tertiary` を含みます   |
| サイズ       | string                | ボタンのサイズ。 ボタンのサイズ。 オプションは2つ：`small` と `medium`                      |
| "位置"      | string                | ボタンの兄弟関係における位置。 オプションは `standalone`、`left`、`right`、 `middle` を含みます |
| アクセント     | string                | ボタンのアクセント色。 オプションは `default`、`blue`、`danger` を含みます                 |
| 間もなく      | ブール型                  | ボタンが「soon」としてマークされているかどうかを示します（たとえば、今後の機能のために）。                    |
| disabled  | ブール型                  | ボタンが無効かどうかを指定します                                                   |
| focus     | ブール型                  | ボタンにフォーカスがあるかどうかを決定します                                             |
| onClick   | 機能                    | ユーザーがボタンをクリックしたときにトリガーされるコールバック関数                                  |

</Tab>

</Tabs>

## ボタングループ

<Tabs>
<Tab title="Usage">
```jsx
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
return ( <ButtonGroup variant="primary" size="large" accent="blue" className>
<Button
className
Icon={null}
title="Button 1"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 2"
fullWidth={false}
variant="secondary"
size="medium"
position="left"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 3"
fullWidth={false}
variant="tertiary"
size="medium"
position="right"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/> </ButtonGroup>
);
};

````
</Tab>

<Tab title="Props">


| Props | Type | Description |
|-------|------|-------------|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
| className | string | Optional class name for additional styling |
| children | ReactNode | An array of React elements representing the individual buttons within the group |



</Tab>
</Tabs>


## Floating Button

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Title"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};
````

</Tab>

<Tab title="Props">

| プロパティ       | タイプ                   | 説明                                                                 |
| ----------- | --------------------- | ------------------------------------------------------------------ |
| className   | string                | 追加スタイル用のオプション名                                                     |
| アイコン        | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント                                        |
| タイトル        | string                | ボタンのテキスト内容                                                         |
| サイズ         | string                | ボタンのサイズ。 ボタンのサイズ。 オプションは2つ：`small` と `medium`                      |
| "位置"        | string                | ボタンの兄弟関係における位置。 オプションは `standalone`、`left`、`middle`、 `right` を含みます |
| applyShadow | ブール型                  | ボタンにシャドウを適用するかどうかを決定します                                            |
| applyBlur   | ブール型                  | ボタンにぼかし効果を適用するかどうかを決定します                                           |
| disabled    | ブール型                  | ボタンが無効かどうかを決定します                                                   |
| focus       | ブール型                  | ボタンにフォーカスがあるかどうかを示します                                              |

</Tab>
</Tabs>

## 浮動ボタングループ

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};
```

</Tab>

<Tab title="Props">

| プロパティ    | タイプ       | 説明                                            | デフォルト |
| -------- | --------- | --------------------------------------------- | ----- |
| サイズ      | string    | ボタンのサイズ。 ボタンのサイズ。 オプションは2つ：`small` と `medium` | small |
| children | ReactNode | グループ内の個々のボタンを表す React エレメントの配列                |       |

</Tab>

</Tabs>

## 浮動アイコンボタン

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| プロパティ       | タイプ                   | 説明                                                                 |
| ----------- | --------------------- | ------------------------------------------------------------------ |
| className   | string                | 追加スタイル用のオプション名                                                     |
| アイコン        | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント                                        |
| サイズ         | string                | ボタンのサイズ。 ボタンのサイズ。 オプションは2つ：`small` と `medium`                      |
| "位置"        | string                | ボタンの兄弟関係における位置。 オプションは `standalone`、`left`、`right`、 `middle` を含みます |
| applyShadow | ブール型                  | ボタンにシャドウを適用するかどうかを決定します                                            |
| applyBlur   | ブール型                  | ボタンにぼかし効果を適用するかどうかを決定します                                           |
| disabled    | ブール型                  | ボタンが無効かどうかを決定します                                                   |
| focus       | ブール型                  | ボタンにフォーカスがあるかどうかを示します                                              |
| onClick     | 機能                    | ユーザーがボタンをクリックしたときにトリガーされるコールバック関数                                  |
| isActive    | ブール型                  | ボタンがアクティブな状態にあるかどうかを決定します                                          |

</Tab>

</Tabs>

## 浮動アイコンボタングループ

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

```

</Tab>

<Tab title="Props">

| プロパティ       | タイプ    | 説明                                                                                                                                                                                                                 |
| ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| className   | string | 追加スタイル用のオプション名                                                                                                                                                                                                     |
| サイズ         | string | ボタンのサイズ。 ボタンのサイズ。 オプションは2つ：`small` と `medium`                                                                                                                                                                      |
| iconButtons | array  | グループ内のアイコンボタンをそれぞれ表すオブジェクトの配列。 各オブジェクトには、ボタンに表示したいアイコンコンポーネント、ユーザーがボタンをクリックした時に呼び出される関数、およびボタンをアクティブにするかどうかが含まれる必要があります。 各オブジェクトには、ボタンに表示したいアイコンコンポーネント、ユーザーがボタンをクリックした時に呼び出される関数、およびボタンをアクティブにするかどうかが含まれる必要があります。 |

</Tab>

</Tabs>

## ライトボタン

<Tabs>
<Tab title="Usage">

```jsx
import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};
```

</Tab>

<Tab title="Props">

| プロパティ     | タイプ               | 説明                                               |
| --------- | ----------------- | ------------------------------------------------ |
| className | string            | 追加のスタイリングのためのオプション名                              |
| アイコン      | `React.ReactNode` | ボタンに表示したいアイコン                                    |
| タイトル      | string            | ボタンのテキスト内容                                       |
| アクセント     | string            | ボタンのアクセント色。 オプションは `secondary`、 `tertiary` を含みます |
| アクティブ     | ブール型              | ボタンがアクティブな状態にあるかどうかを決定します                        |
| disabled  | ブール型              | ボタンが無効かどうかを決定します                                 |
| focus     | ブール型              | ボタンにフォーカスがあるかどうかを示します                            |
| onClick   | 機能                | ユーザーがボタンをクリックしたときにトリガーされるコールバック関数                |

</Tab>

</Tabs>

## ライトアイコンボタン

<Tabs>
<Tab title="Usage">

```jsx
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| プロパティ     | タイプ                   | 説明                                               |
| --------- | --------------------- | ------------------------------------------------ |
| className | string                | 追加スタイル用のオプション名                                   |
| testId    | string                | ボタンのテスト識別子                                       |
| アイコン      | `React.ComponentType` | ボタン内に表示されるオプションのアイコンコンポーネント                      |
| タイトル      | string                | ボタンのテキスト内容                                       |
| サイズ       | string                | ボタンのサイズ。 ボタンのサイズ。 オプションは2つ：`small` と `medium`    |
| アクセント     | string                | ボタンのアクセント色。 オプションは `secondary`、 `tertiary` を含みます |
| アクティブ     | ブール型                  | ボタンがアクティブな状態にあるかどうかを決定します                        |
| disabled  | ブール型                  | ボタンが無効かどうかを決定します                                 |
| focus     | ブール型                  | ボタンにフォーカスがあるかどうかを示します                            |
| onClick   | 機能                    | ユーザーがボタンをクリックしたときにトリガーされるコールバック関数                |

</Tab>

</Tabs>

## メインボタン

<Tabs>
<Tab title="Usage">

```jsx
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};
```

</Tab>

<Tab title="Props">

| プロパティ                | タイプ                              | 説明                                                                                          |
| -------------------- | -------------------------------- | ------------------------------------------------------------------------------------------- |
| タイトル                 | string                           | ボタンのテキスト内容                                                                                  |
| fullWidth            | ブール型                             | ボタンがコンテナの全幅を占めるかどうかを定義します                                                                   |
| バリアント                | string                           | ボタンの視覚スタイルのバリアント。 オプションは `primary` と `secondary` を含みます オプションは `primary` と `secondary` を含みます |
| 間もなく                 | ブール型                             | ボタンが「soon」としてマークされているかどうかを示します（たとえば、今後の機能のために）。                                             |
| アイコン                 | `React.ComponentType`            | ボタン内に表示されるオプションのアイコンコンポーネント                                                                 |
| React `button` props | `React.ComponentProps<'button'>` | 標準的なHTMLボタンのプロパティすべてがサポートされています                                                             |

</Tab>

</Tabs>

## 丸型アイコンボタン

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};
```

</Tab>

<Tab title="Props">

| プロパティ                | タイプ                                             | 説明 |
| -------------------- | ----------------------------------------------- | -- |
| アイコン                 | `React.ComponentType`                           |    |
| React `button` props | `React.ButtonHTMLAttributes<HTMLButtonElement>` |    |

</Tab>

</Tabs>
